<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>

	<body>
		<canvas id="myCanvas" width="" height="" style="border: 1px solid red;"></canvas>
		<button id="btn" type="button" class="mui-btn mui-btn-blue">按钮</button>
		<button id="revers" class="mui-btn mui-btn-blue">反色</button>
		<button id="blur" class="mui-btn mui-btn-blue">模糊</button>
	</body>
	<script type="text/javascript">
		var canvas = document.getElementById("myCanvas");
		var context = canvas.getContext("2d");

		canvas.width = 318;
		canvas.height = 200;

		document.getElementById("btn").addEventListener("tap", function() {
			// 获取系统的相机
			var camera = plus.camera.getCamera();

			camera.captureImage(function(path) {
				// 路径转化
				var localUrl = null;
				plus.io.resolveLocalFileSystemURL(path, function(entry) {
					//					alert("成功: " + entry.toLocalURL());
					// 路径   -->  image
					var img = new Image();
					img.src = entry.toLocalURL();
					img.onload = function() {
						context.drawImage(img, 0, 0, canvas.width, canvas.height);
					}
				}, function(error) {
					aler("转换路径失败: " + error);
				});

			}, function(error) {
				alert("选取图片失败: " + error);
			});
		});

		// 反色按钮的点击事件
		document.getElementById("revers").addEventListener("tap", function() {
			var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
			var piexl = imageData.data;
			for(var i = 0; i < canvas.width * canvas.height; i++) {
				piexl[i * 4 + 0] = 255 - piexl[i * 4 + 0];
				piexl[i * 4 + 1] = 255 - piexl[i * 4 + 1];
				piexl[i * 4 + 2] = 255 - piexl[i * 4 + 2];
			}

			context.putImageData(imageData, 0, 0, 0, 0, canvas.width, canvas.height);
		});

		document.getElementById("blur").addEventListener("tap", function() {
			var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
			var piexl = imageData.data;

			var imageData2 = context.getImageData(0, 0, canvas.width, canvas.height);
			var piexl2 = imageData2.data;

			var mohuChengdu = 4;
			var totalNum = (2 * mohuChengdu + 1) * (2 * mohuChengdu + 1);

			for(var i = mohuChengdu; i < canvas.height - mohuChengdu; i++) {
				for(var j = mohuChengdu; j < canvas.width - mohuChengdu; j++) {

					var sumR = 0;
					var sumG = 0;
					var sumB = 0;
					for(var mx = -1 * mohuChengdu; mx <= mohuChengdu; mx++) {
						for(var my = -1 * mohuChengdu; my <= mohuChengdu; my++) {

							var x = i + mx;
							var y = j + my;

							var p = x * canvas.width + y;

							sumR += piexl2[p * 4 + 0];
							sumG += piexl2[p * 4 + 1];
							sumB += piexl2[p * 4 + 2];
						}
					}
					var ij = i * canvas.width + j;
					piexl[ij * 4 + 0] = sumR / totalNum;
					piexl[ij * 4 + 1] = sumG / totalNum;
					piexl[ij * 4 + 2] = sumB / totalNum;
				}
			}
			context.putImageData(imageData, 0, 0, 0, 0, canvas.width, canvas.height);
		});
	</script>

</html>